<template>
  <div class="box">
    <div class="left">
      <h3>阅卷</h3>
      <Card>
        <div v-if="getdata.questions">
          <div class="header">
            <span>1.</span>
            <MarkdownPreview :initialValue="getdata.questions[0].title"></MarkdownPreview>
            <Tag color="blue">{{getdata.questions[0].questions_type_text}}</Tag>
          </div>
          <div class="img">
            <MarkdownPreview :initialValue="getdata.questions[0].questions_stem" />
          </div>
          <div class="footer">
            <div class="l">
              <div class="ll">
                <div class="hr"></div>
                <h5>学生答案</h5>
                <MarkdownPreview :initialValue="getdata.questions[0].student_answer" />
              </div>
            </div>
            <div class="r">
              <div class="hr"></div>
              <h5>标准答案</h5>
              <MarkdownPreview :initialValue="getdata.questions[0].questions_answer" />
            </div>
          </div>
          <div class="main">
            <div class="header">
              <span>2.</span>
              <MarkdownPreview :initialValue="getdata.questions[1].title"></MarkdownPreview>
              <Tag color="blue">{{getdata.questions[1].questions_type_text}}</Tag>
            </div>
            <div class="footer">
              <div class="l">
                <div class="ll">
                  <div class="hr"></div>
                  <h5>学生答案</h5>
                  <MarkdownPreview :initialValue="getdata.questions[1].student_answer" />
                </div>
              </div>
              <div class="r">
                <div class="hr"></div>
                <h5>标准答案</h5>
                <MarkdownPreview :initialValue="getdata.questions[1].questions_answer" />
              </div>
            </div>
          </div>
          <div class="box3">
            <div class="header">
              <h5>3.</h5>
              <MarkdownPreview :initialValue="getdata.questions[2].title"></MarkdownPreview>
              <Tag color="blue">{{getdata.questions[2].questions_type_text}}</Tag>
            </div>
            <h1>{{getdata.questions[2].title}}</h1>
            <div class="footer">
              <div class="l">
                <div class="ll">
                  <div class="hr"></div>
                  <h5>学生答案</h5>
                  <MarkdownPreview :initialValue="getdata.questions[2].student_answer" />
                </div>
              </div>
              <div class="r">
                <div class="hr"></div>
                <h5>标准答案</h5>
                <MarkdownPreview :initialValue="getdata.questions[2].questions_answer" />
              </div>
            </div>
          </div>
          <div class="box4">
            <div class="header">
              <h5>3.</h5>
              <MarkdownPreview :initialValue="getdata.questions[3].title"></MarkdownPreview>
              <Tag color="blue">{{getdata.questions[3].questions_type_text}}</Tag>
            </div>
            <h1>{{getdata.questions[3].title}}</h1>
            <div class="footer">
              <div class="l">
                <div class="ll">
                  <div class="hr"></div>
                  <h5>学生答案</h5>
                  <MarkdownPreview :initialValue="getdata.questions[3].student_answer" />
                </div>
              </div>
              <div class="r">
                <div class="hr"></div>
                <h5>标准答案</h5>
                <MarkdownPreview :initialValue="getdata.questions[3].questions_answer" />
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
    <div class="right" style="margin-top:28px">
      <Card>
        <h2>{{getdata.student_name}}</h2>
        <h2>得分{{value1}}</h2>
        <Slider v-model="value1" on-input></Slider>
        <Button type="primary" @click="setScoreInfo({id:getdata.exam_student_id,score:value1})">确定</Button>
      </Card>
    </div>
  </div>
</template>

<script>
import { MarkdownPreview } from 'vue-meditor'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'box',
  components: {
    MarkdownPreview
  },
  data() {
    return {
      value1: 0,
      buttonSize: 'large'
    }
  },
  computed: {
    ...mapState('waitCheck', ['getdata'])
  },
  methods: {
    ...mapActions('waitCheck', ['editInfo', 'setScoreInfo'])
  },
  created() {
    console.log(this.getdata)
    this.editInfo(this.$route.query.id)
  }
}
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
}
.left {
  width: 80%;
  height: 100%;
}
.hr {
  width: 100%;
  height: 1px;
  background: #eee;
}
.header {
  display: flex;
  align-items: center;
}
.right {
  width: 18%;
  height: 300px;
}
.footer {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.l {
  width: 50%;
}
</style>
